<template>
	<view class="order" :style="{ '--color': vuex_config.themeColor1 }">
		<sww-wx-address></sww-wx-address>
		<view class="title-box">
			<view class="title">{{ specActItem.prodName }}</view>
			<view class="tip">请在120分钟内完成支付，否则该订单将自动取消</view>
		</view>
		<view class="product-box">
			<view class="title">{{vuex_business.name}}</view>
			<view class="product-detail">
				<view>{{ specActItem.name }}</view>
				<view class="product-price">
					<text v-if="specActItem.integral > 0">{{ specActItem.integral }}积分</text>
					<text v-if="specActItem.integral > 0 && specActItem.price > 0">+</text>
					<text v-if="specActItem.price > 0">{{ specActItem.price }}元</text>
					<text class="num">x {{ specActItem.num }}</text>
				</view>
			</view>
		</view>
		<view class="integral">
			<text>支付积分</text>
			<text class="tip">{{ specActItem.integral * specActItem.num }}</text>
		</view>
		<view class="integral">
			<text>支付金额</text>
			<text class="tip">￥{{ totalprice }}</text>
		</view>
		<view class="integral">
			<text>备注</text>
			<u-input v-model="dataForm.remark" :type="type" placeholder="请控制在120字以内" maxlength="120"
				style="width: 350rpx" />
		</view>
		<view class="box" v-if="specActItem.price > 0">
			<sww-pay-type v-model="dataForm.pay_type" :price="totalPrice || 0"></sww-pay-type>
		</view>
		<sww-goods-action>
			<view class="sub-price">
				<view class="">总计：</view>
				<view class="all_price sww-tp">
					<text v-if="specActItem.integral > 0">{{ specActItem.integral * specActItem.num }}积分</text>
					<template v-if="totalprice > 0">
						<text v-if="specActItem.integral > 0">+</text>
						<text>{{ totalprice }}元</text>
					</template>
				</view>
			</view>
			<view class="sub-btn" @click="onSubmit">提交订单</view>
		</sww-goods-action>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		toNumber
	} from '@/utils/transform';
	import {
		localPostage
	} from '@/mixins/localPostage';
	import {
		payOrder
	} from '@/mixins/payOrder';
	export default {
		mixins: [wxConfig, localPostage, payOrder],
		data() {
			return {
				dataForm: {
					name: '',
					phone: '',
					address: '',
					type: 1,
					postage: '',
					remark: '',
					pay_status: '0',
					order_type: 5,
					coupon: '',
					pay_type: '1'
				},
				specActItem: {},
				totalprice: 0,
				prodPostage: 0,
				prodPrice: 0
			};
		},
		onLoad(options) {
			this.loadUserCount()
			this.initPage();
		},
		computed: {
			...mapState(['vuex_address', 'vuex_count', 'vuex_business', 'vuex_user'])
		},
		methods: {
			...mapActions(['loadUserCount']),
			initPage() {
				// #ifdef H5
				// h5需要先获取支付和地址的配置
				this.$loading();
				this.initWxConfig(['chooseWXPay', 'openAddress'])
					.then(() => this.$hide())
					.catch(() => this.$hide());
				// #endif
				
				// #ifdef   MP-BAIDU || MP-ALIPAY || MP-TOUTIAO
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]
				this.onTransmission(prevPage.$vm.paramsObj)
				// #endif
				// #ifndef MP-ALIPAY ||  MP-BAIDU || MP-TOUTIAO
				let openChannel = this.getOpenerEventChannel();
				// 接受上个页面(普通产品详情页)的数据
				openChannel.once('acceptParams', res => {
					this.onTransmission(res.specParams)
				});
				//#endif 
			},
			onTransmission (specParams) {
				this.specActItem = {...specParams}
				//计算产品总金额
				this.totalprice = toNumber(specParams.price) * toNumber(specParams.num);
				if (this.vuex_address) this.getProdPostage();
			},
			// 获取邮费:得先选择了地址
			getProdPostage() {
				let {
					num
				} = this.specActItem;
				// 计算产品邮费
				this.prodPostage = this.$getPostage(num, 1, 0, this.totalprice);
			},
			onSubmit() {
				this.$u.debounce(
					() => {
						if (!this.vuex_address) {
							this.$toast('请选择收货地址');
							return;
						}
						if (!this.$checkCanBuyFromPostageModule()) return;
						this.loadUserCount();
						let json = [{
							fk_mall_pro_id: this.specActItem.prodId,
							fk_stock_id: this.specActItem.stockId,
							integration: this.specActItem.integral,
							price: this.specActItem.price,
							num: this.specActItem.num,
							remark: ''
						}];
						let params = {
							...this.vuex_address,
							coupon_id: 0, //优惠卷
							postage: this.prodPostage,
							remark: this.dataForm.remark,
							total_amount: this.totalprice,
							json_detailed: JSON.stringify(json)
						};
						if (!this.vuex_count.integral || this.vuex_count.integral < this.specActItem.integral)
						return this.$toast('当前积分不足');
						if (params.total_amount == 0) {
							this.dataForm.pay_type = 4;
						}
						this._submitOrder(params, {
							// prodName:this.specActItem.name,
							totalPrice: params.total_amount,
							orderApi: 'AddOrderMallProduct',
							pay_type: this.dataForm.pay_type,
							integral: true,
							order_type: 8,
						});
					},
					1000,
					true
				);
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.order {
		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}

		.tip {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}

		.title-box {
			padding: 30rpx;
			border-bottom: 1px solid #eaeaea;
			background-color: #fff;
		}

		.product-box {
			padding: 30rpx;
			border-bottom: 1px solid #eaeaea;
			background-color: #fff;

			.product-detail {
				margin-top: 20rpx;

				.product-price {
					color: $sww-theme-price;
					margin-top: 6rpx;

					.num {
						margin-left: 20rpx;
					}
				}
			}
		}

		.integral {
			padding: 20rpx 30rpx 10rpx;
			border-bottom: 1px solid #eaeaea;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.sub-price {
			padding-left: 30rpx;
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			.all_price {
				flex: 1;
				overflow: hidden;
			}
		}

		.box {
			width: 100%;
			padding: 0 24rpx;
			background-color: #ffffff;
			margin-bottom: 10rpx;
			margin-top: 10rpx;
		}

		.sub-btn {
			width: 250rpx;
			height: 100rpx;
			background: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 30rpx;
			margin-left: auto;
		}
	}
</style>
